import { Layout, Menu } from "antd";
import SimpleBar from "simplebar-react";
import "simplebar-react/dist/simplebar.min.css";
// import { ENV } from "@/utils/env";
import {
  UserOutlined,
  SafetyCertificateOutlined,
  // WalletOutlined,
  TagOutlined,
  // TrophyOutlined,
  TeamOutlined,
} from "@ant-design/icons";
import { useState } from "react";
import type { MouseEvent } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import type { Location, NavigateFunction } from "react-router-dom";
// import { changeIsShowMenu } from "@/store/app/appSlice";
import { useMediaQuery } from "react-responsive";
// import { useAppDispatch, useAppSelector } from "@/store/hooks";
import type { MenuProps } from "antd";
import { usConfigStore } from "../../stores";
import logo from "@/assets/react.svg";

const { Sider } = Layout;

type MenuItem = Required<MenuProps>["items"][number];

export const items: MenuItem[] = [
  {
    key: "/",
    icon: <TeamOutlined />,
    label: "主页",
    children: [
      {
        key: "/about",
        label: "关于我们",
      },
      {
        key: "/newdata",
        label: "数据测试",
      },
    ],
  },
  {
    key: "/white",
    icon: <SafetyCertificateOutlined />,
    label: "测试",
    children: [
      {
        key: "/zustand",
        label: "zustand测试",
      },
      {
        key: "/scroll",
        label: "无限滚动",
      },
      {
        key: "form",
        label: "表单提交",
      },
      {
        key: "/watermark",
        icon: <TagOutlined />,
        label: "水印测试",
      },
      {
        key: "/echarts",
        icon: <TagOutlined />,
        label: "echarts测试",
      },
      {
        key: "/white-hold",
        label: "防刷拦截白名单",
      },
    ],
  },

  {
    key: "/admin",
    icon: <UserOutlined />,
    label: "Admin管理",
    children: [
      {
        key: "/admin-user",
        label: "Admin用户",
      },
    ],
  },
];

export default function Aside() {
  const [collapse, setCollapse] = useState<boolean>(false);
  const { isShowMenu, changeShowMenu } = usConfigStore();
  // const [isShowMenu, setIsShowMenu] = useState<boolean>(true);
  const isLG: boolean = useMediaQuery({ query: "(max-width: 1024px)" });

  const { pathname }: Location = useLocation();
  const navigate: NavigateFunction = useNavigate();
  // const dispatch = useAppDispatch();

  return (
    <Sider
      width={isLG ? "100vw" : 260}
      collapsible={!isLG}
      collapsed={isLG ? false : collapse}
      theme="light"
      style={{
        display: isLG ? (isShowMenu ? "block" : "none") : "block",
        height: "100vh",
        position: isLG ? "fixed" : "sticky",
        background: isLG ? "rgba(0,0,0,0.5)" : "white",
        zIndex: 50,
        top: 0,
        left: 0,
      }}
      onCollapse={(
        collapse: boolean,
        type: "clickTrigger" | "responsive"
      ): void => {
        type == "clickTrigger" && setCollapse(collapse);
      }}
      onClick={(): void => {
        changeShowMenu(false);
      }}
    >
      <div
        className="max-w-[260px] bg-white h-full"
        onClick={(e: MouseEvent<HTMLDivElement>): void => e.stopPropagation()}
      >
        <div className="px-[28px] py-[8px] flex h-[64px] items-center">
          <img
            className="max-w-[30px] max-h-[30px] w-full h-full object-contain"
            src={logo}
            alt="logo"
          />
          {!isLG && collapse ? null : (
            <div className="flex flex-col justify-center ml-[8px]">
              <h3 className="text-[18px] font-bold">Test</h3>
              <div className="text-[12px] text-[#919191]">dev</div>
            </div>
          )}
        </div>
        <SimpleBar style={{ maxHeight: "calc(100vh - 64px - 48px)" }}>
          <Menu
            mode="inline"
            selectedKeys={[pathname]}
            defaultOpenKeys={[pathname?.split?.("-")?.[0]]}
            onClick={({ key }): void => {
              changeShowMenu(false);
              navigate(key);
            }}
            items={items}
          />
        </SimpleBar>
      </div>
    </Sider>
  );
}
